<template>
  <z-transfer
    v-model:target-keys="targetKeys"
    v-model:selected-keys="selectedKeys"
    :data-source="mockData"
    :titles="['Source', 'Target']"
    :render="item => item.title"
    :showSearch="true"
    :filter-option="filterOption"
    @change="handleChange"
    @search="handleSearch"
  />
</template>

<script>
import { defineComponent, ref } from "vue";

const mockData = [];
for (let i = 0; i < 20; i++) {
  mockData.push({
    key: i.toString(),
    title: `content${i + 1}`,
    description: `description of content${i + 1}`
  });
}

export default defineComponent({
  setup() {
    const targetKeys = ref([]);

    const selectedKeys = ref(['1', '4']);

    const handleChange = (nextTargetKeys, direction, moveKeys) => {
      console.log('targetKeys: ', nextTargetKeys, 'direction: ', direction, 'moveKeys: ', moveKeys);
    };
    const handleSearch = (direction, value) => {
      console.log(direction, value, '----------------direction, value-----------------')
    };
     const filterOption = (inputValue, option) => {
      return option.description.indexOf(inputValue) > -1;
    };
    return {
      mockData,
      targetKeys,
      selectedKeys,
      handleChange,
      handleSearch,
      filterOption
    }
  }
})
</script>